<script>
import service from "axios"
// import {getBookList} from '@/axios/bookAxios'
// import axiosConfig from '@/axios/axiosConfig'
export default {
    data() {
        return {
            bookName: '',
            author: '',
            publisher: '',
            category: '',
            description: '',
            heighPrice: '',
            lowPrice: '',
            heighStock: '',
            lowStock: '',
            bookData: [],
            quantity: '',
            username: '',
          num: '',
            total: "",
      pageNum: 1,
      pageSize: 5,
        }
    },
    methods: {
        async search() {
            const responseBody={
                title: this.bookName,
                author: this.author,
                publisher: this.publisher,
                category: this.category,
                description: this.description,
                highPrice: this.heighPrice,
                lowPrice: this.lowPrice,
                highStock: this.heighStock,
                lowStock: this.lowStock,
                pageNum: 1,
                pageSize: 10
            }
            const response = await service.post('http://localhost:8080/books/searchBooks', responseBody)
            console.log(response)
            this.bookData=response.data.data.list
            console.log(this.bookName)
        },
        async handleClick(row) {
            console.log(row);
            const responseBody={
                bookId: row.bookId,
                quantity: this.num,
                username: this.username
            }
            const response = await service.post('http://localhost:8080/order/addOrder', responseBody)
            console.log(response)
            this.$message.success("添加成功")
            this.num = ''
      },
      async handleCurrentChange(newPageNum) {
        this.pageNum = newPageNum
        const responseBody={
            pageNum: this.pageNum,
            pageSize: this.pageSize
        }
        const response = await service.post('http://localhost:8080/books/queryBooks', responseBody)
        console.log(response.data.data.list)
      this.bookData = response.data.data.list
        this.total = response.data.data.total
        this.username = sessionStorage.getItem("username")
      },
      async handleSizeChange(newPageSize) {
        this.pageSize = newPageSize
        const responseBody={
            pageNum: this.pageNum,
            pageSize: this.pageSize
        }
        const response = await service.post('http://localhost:8080/books/queryBooks', responseBody)
        console.log(response.data.data.list)
      this.bookData = response.data.data.list
        this.total = response.data.data.total
        this.username = sessionStorage.getItem("username")
      }
    },
    async created() {
        const responseBody={
            pageNum: this.pageNum,
            pageSize: this.pageSize
        }
        const response = await service.post('http://localhost:8080/books/queryBooks', responseBody)
        console.log(response.data.data.list)
      this.bookData = response.data.data.list
        this.total = response.data.data.total
        this.username = sessionStorage.getItem("username")
    },
    mounted() {

    }
}
</script>

<template>
    <div>
        <div class="search">
            <el-input placeholder="书籍名称" class="search-input" v-model="bookName"></el-input>
            <el-input placeholder="作者" v-model="author" class="search-input"></el-input>
            <el-input placeholder="出版社" v-model="publisher" class="search-input"></el-input>
            <el-input placeholder="分类" v-model="category" class="search-input"></el-input>
            <el-input placeholder="描述" v-model="description" class="search-input"></el-input>
            <el-input placeholder="最高价格" v-model="heighPrice" class="search-input"></el-input>
            <el-input placeholder="最低价格" v-model="lowPrice" class="search-input"></el-input>
            <el-input placeholder="最高库存" v-model="heighStock" class="search-input"></el-input>
            <el-input placeholder="最低库存" v-model="lowStock" class="search-input"></el-input>
            <el-button @click="search">搜索</el-button>
        </div>
        <div class="table-box">
            <el-table
    :data="bookData"
    border
    style="width: 100%"
    class="table">
    <el-table-column
      fixed
      prop="title"
      label="书籍名称"
      width="150">
    </el-table-column>
    <el-table-column
      prop="author"
      label="作者"
      width="120">
    </el-table-column>
    <el-table-column
      prop="category"
      label="分类"
      width="120">
    </el-table-column>
    <el-table-column
      prop="description"
      label="描述"
      width="120">
    </el-table-column>
    <el-table-column
      prop="publishDate"
      label="出版社"
      width="300">
    </el-table-column>
    <el-table-column
      prop="price"
      label="价格"
      width="120">
    </el-table-column>
    <el-table-column
      prop="stock"
      label="库存"
      width="120">
    </el-table-column>
    <el-table-column
      label="操作"
      width="100">
      <template slot-scope="scope">
        <el-popover width="200" title="" content="" trigger="hover" placement="bottom" >
            <el-input placeholder="数量" v-model="num"></el-input>
                  <el-button slot="reference" @click="handleClick(scope.row)" type="text" size="small">加入购物车</el-button>
        </el-popover>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
    background
    :total="total"
    :page-size="pageSize"
    :page-sizes="[5, 10, 15, 20, 25]"
    :current-page="pageNum"
    :page-count="totalPage"
    layout="total, sizes, prev, pager, next, jumper"
    @current-change="handleCurrentChange"
    @size-change="handleSizeChange"
  ></el-pagination>
        </div>
    </div>
</template>

<style scoped>
.search-input {
    width: 150px;
}
.select-input {
    width: 50px;
}

.table{
    width: 80%;
}
</style>